<template>
  <div class="clickOutside" v-click-outside="blurHandler">
    <input type="text" @focus="focusHandler" />
    <div class="panel" v-show="isShow">面板</div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      isShow: false,
    };
  },
  directives: {
    "click-outside": {
      bind: function (el, dir, vnode) {
        el.handler = function (e) {
          if(!el.contains(e.target)){
            let method = dir.expression;
            vnode.context[method]();
          }
        }
        document.addEventListener('click',el.handler)
      },
      unbind:function (el){
        document.removeEventListener('click',el.handler)
      }
    },
  },
  methods: {
    focusHandler() {
      this.isShow = true;
    },
    blurHandler() {this.isShow = false}
  },
};
</script>

<style scoped lang="scss">
.clickOutside {
  display: inline-flex;
  flex-direction: column;
  .panel {
    border: 1px solid #777;
    height: 100px;
  }
}
</style>
